<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseCreate()"
    >

        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                class="mx-auto"
                label-width="120px"
                status-icon
        >

            <el-form-item
                    label="上级菜单"
                    prop="pid"
            >
                <el-tree-select
                        v-model="api.createState.form.pid"
                        :data="tree"
                        :expand-on-click-node="false"
                        :props="{label:'name'}"
                        :render-after-expand="false"
                        check-strictly
                        class="fill-width"
                        placeholder="上级菜单"
                        value-key="id"
                >
                </el-tree-select>
            </el-form-item>

            <el-form-item
                    label="菜单名称"
                    prop="name"
            >
                <el-input
                        v-model="api.createState.form.name"
                        clearable
                        placeholder="菜单名称"
                />
            </el-form-item>

            <el-form-item
                    label="菜单地址"
                    prop="path"
            >
                <el-input
                        v-model="api.createState.form.path"
                        clearable
                        placeholder="菜单地址"
                />
            </el-form-item>

            <el-form-item
                    label="菜单顺序"
                    prop="sort"
            >
                <el-input-number
                        v-model="api.createState.form.sort"
                        clearable
                        placeholder="顺序"
                />
            </el-form-item>

            <el-form-item
                    label="是否显示"
                    prop="isShow"
            >
                <el-radio-group
                        v-model="api.createState.form.isShow"
                >
                    <el-radio :label="true" border>显示</el-radio>
                    <el-radio :label="false" border>不显示</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item
                    label="菜单图标"
                    prop="icon"
            >
                <i-icon-menu v-model="api.createState.form.icon"></i-icon-menu>
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {MenuApi} from "~/api/system/menu/menu.api";
import IIconMenu from "~/icesoft/components/icon/IIconMenu.vue";

interface Props {
    api: MenuApi;
}

const {api} = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const rules = reactive<FormRules>({
    pid: [{required: true, message: "请选择菜单上级", trigger: "blur"}],
    name: [{required: true, message: "请输入菜单名称", trigger: "blur"}],
    path: [{required: true, message: "请输入菜单地址", trigger: "blur"}],
    isShow: [{required: true, message: "请选择是否显示", trigger: "blur"}],
    sort: [{required: true, message: "请输入菜单顺序", trigger: "blur"}],
});

const tree = computed(() => {
    let treeData = [];
    treeData.push({
        id: "0",
        name: "顶级",
    });
    api.tableState.dataSource.forEach(item => {
        if (item.pid == "0") {
            treeData.push({
                id: item.id,
                name: item.name,
                pid: item.pid,
            });
        }
    });
    return treeData;
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseCreate();
            }
        });
    }
}

</script>

<style lang="less" scoped>

</style>
